<template>
  <div>
    <el-container >
      <el-header class="header">
        <img src="../assets/img/home/logo.png" alt="" style="width:300px"/>
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          background-color="rgba(0,0,0)"
          text-color="#fff"
          active-text-color="#E60000"
          text-size="18px"
          
        >
          <el-submenu index="1">
            <template slot="title">标准快递</template>
            <el-menu-item index="1-1">产品介绍</el-menu-item>
            <el-menu-item index="1-2">在线寄件</el-menu-item>
            <el-menu-item index="1-3">运单查询</el-menu-item>
            <el-menu-item index="1-4">运费查询</el-menu-item>
            <el-menu-item index="1-5">网点查询</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">国际快递</template>
            <el-menu-item index="2-1">产品介绍</el-menu-item>
            <el-menu-item index="2-2">预约下单</el-menu-item>
            <el-menu-item index="2-3">运单查询</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">加盟合作</el-menu-item>
          <el-menu-item index="4">极速理赔</el-menu-item>
          <el-submenu index="5">
            <template slot="title">关于我们</template>
            <el-menu-item index="5-1">关于极兔</el-menu-item>
            <el-menu-item index="5-2">新闻中心</el-menu-item>
            <el-menu-item index="5-3">社会责任</el-menu-item>
            <el-menu-item index="5-4">联系我们</el-menu-item>
            <el-menu-item index="5-5">加入我们</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
<el-main>
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in 3" :key="item">
            <h3>
              <img src="../assets/img/home/home_banner/1641869587000input.png" width="100%" height="100%">
            </h3>
          </el-carousel-item>
        </el-carousel>
</el-main>
      <el-footer style="background-color: #333333; height: 482px">
        <div class="footer">
          <div class="icon">
            <img width="230px" src="../assets/img/home/logo.png" alt="" />
          </div>
          <div class="list">
            <div class="bz">
              <h3>标准快递</h3>
              <ul>
                <li><a href="">产品介绍</a></li>
                <li><a href="">在线寄件</a></li>
                <li><a href="">运单查询</a></li>
                <li><a href="">运费查询</a></li>
                <li><a href="">网点查询</a></li>
              </ul>
            </div>
            <div class="bz">
              <h3>国际标快</h3>
              <ul>
                <li><a href="">产品介绍</a></li>
                <li><a href="">预约下单</a></li>
                <li><a href="">运单查询</a></li>
                <li><a href="">联系我们</a></li>
              </ul>
            </div>
            <div class="bz">
              <h3>加盟合作</h3>
              <ul>
                <li><a href="">加盟合作</a></li>
              </ul>
            </div>
            <div class="bz">
              <h3>极速理赔</h3>
              <ul>
                <li><a href="">极速理赔</a></li>
              </ul>
            </div>
            <div class="bz">
              <h3>关于我们</h3>
              <ul>
                <li><a href="">关于极兔</a></li>
                <li><a href="">新闻中心</a></li>
                <li><a href="">社会责任</a></li>
                <li><a href="">联系我们</a></li>
                <li><a href="">加入我们</a></li>
                <li><a href="">开放平台</a></li>
              </ul>
            </div>
          </div>

          <div class="country">
            <span>其他业务官网</span>
            <ul>
              <li>
                <img
                  src="../assets/img/footer/icon_Vietnam@2x.png"
                  alt=""
                /><span>越南</span>
              </li>
              <li>
                <img
                  src="../assets/img/footer/icon_Indonesia@2x.png"
                  alt=""
                /><span>印度尼西亚</span>
              </li>
              <li>
                <img
                  src="../assets/img/footer/icon_Malaysia@2x.png"
                  alt=""
                /><span>马来西亚</span>
              </li>
              <li>
                <img src="../assets/img/footer/icon_Egypt.png" alt="" /><span
                  >埃及</span
                >
              </li>
              <li>
                <img src="../assets/img/footer/icon_Brazil.png" alt="" /><span
                  >巴西</span
                >
              </li>
              <li>
                <img
                  src="../assets/img/footer/icon_Philippine@2x.png"
                  alt=""
                /><span>菲律宾</span>
              </li>
              <li>
                <img
                  src="../assets/img/footer/icon_Singapore@2x.png"
                  alt=""
                /><span>新加坡</span>
              </li>
              <li>
                <img
                  src="../assets/img/footer/icon_Thailand@2x.png"
                  alt=""
                /><span>泰国</span>
              </li>
              <li>
                <img src="../assets/img/footer/AE.png" alt="" /><span
                  >阿联酋</span
                >
              </li>
              <li>
                <img src="../assets/img/footer/Mexico.png" alt="" /><span
                  >墨西哥</span
                >
              </li>
              <li>
                <img src="../assets/img/footer/SA.png" alt="" /><span
                  >沙特阿拉伯</span
                >
              </li>
              <li>
                <img
                  src="../assets/img/footer/icon_Cambodia@2x.png"
                  alt=""
                /><span>柬埔寨</span>
              </li>
            </ul>
          </div>
          <div class="ys">
            <span>隐私政策</span
            ><span>地址: 上海市青浦区华新镇华隆路1777号</span
            ><span>版权公告️©2020 J&T Express 粤ICP备18009307号-6</span>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>

<style lang="scss" scoped>
// 引入重置样式
@import "../assets/css/reset.css";
// 引入基础样式
@import "../assets/css/base.css";
.header {
  display: flex;
  justify-content: space-between;
}
.footer {
  margin: 0 auto;
  width: 1600px;
  height: 482px;
  padding: 50px 230px;
  display: flex;
  justify-content: space-between;
  position: relative;
  .list {
    display: flex;
    width: 760px;
    justify-content: space-between;
    .bz {
      color: #999;
      font-weight: 100;
      ul {
        margin-top: 30px;
      }
      li {
        margin-top: 15px;
        a {
          color: #999;
        }
      }
    }
  }
}
h3 {
  color: white;
}
.country {
  color: #999;
  position: absolute;
  bottom: 70px;
  ul {
    display: flex;
    border-bottom: 1px solid #9999;
    margin-bottom: 10px;
  }
  li {
    display: flex;
    justify-content: space-between;
    background-color: #1a1919;
    line-height: 20px;
    border-radius: 10px;
    padding: 3px;
    margin: 15px;
    img {
      width: 20px;
      height: 20px;
    }
  }
}
.ys {
  position: absolute;
  bottom: 27px;
  color: #999;
  span {
    margin-right: 50px;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
